<template>
    <block v-if="scene == 1154">
    	<pyq-open-chunk></pyq-open-chunk>
    </block>
    <block v-else>
        <view class="pages col-3e">
            <block v-if="list.length > 0">
                <view class="tabs flex col-grey">
                    <block v-for="(tit, index) in list" :key="index">
                        <view class="tab flex font16" :class="curr == index ? 'active font18 fontBold col-3e':''" @click="changeTabs(index)">
                            {{tit.title}}
                        </view>
                    </block>
                </view>
                <view class="flex mianze" @click="mianze = true">
                    楼盘动态免责声明<u-icon name="error-circle" color="#007235" size="14"></u-icon>
                </view>
                <up-steps direction="column" dot inactiveColor="#007235" activeColor="#007235">
                    <block v-for="(item,index) in list[curr].value" :key="index">
                        <up-steps-item>
                            <template v-slot:desc>
                                <view class="cont">
                                    <view class="col-grey">{{item.create_time}}</view>
                                    <view class="title fontBold font16">{{item.title}}</view>
                                    <view class="desc col-3e">
                                        <u-read-more show-height="120" close-text="全文" :shadow-style="shadowSty" :toggle="true">
                                            <view class="contTxt">{{item.content}}</view>
                                        </u-read-more>
                                    </view>
                                    <view class="imgs">
                                        <block v-for="(img,num) in item.image" :key="img.key">
                                            <image class="dynamicImg" :lazy-load="true" :src="img.url" mode="aspectFill" @click="preImg(item.image,num)"></image>
                                        </block>
                                    </view>
                                </view>
                            </template>
                        </up-steps-item>
                    </block>
                </up-steps>
                
                <view class="empty flex font13 col-grey">暂无更多</view>

                <u-gap height="40" bg-color="#fff"></u-gap>
            </block>

            <up-empty text="暂无数据" mode="list" marginTop="100" v-if="list.length === 0"></up-empty>

            <!-- <share-btn :display="scrollAnimate"></share-btn> -->

			<!-- <bind-seller-bottom-bar :detail="recommendAdviser" v-if="recommendAdviser&&recommendAdviser.avatar_url"></bind-seller-bottom-bar> -->

            <up-modal :show="mianze" title="免责声明" :showCloseBtn="false" :closeOnClickOverlay="true" @close="mianze = false" @confirm="mianze = false">
                <view class="mianzeCon font14 width-100">
                    <view class="listItem">
                        1、本页面内容，旨在满足广大用户的信息需求而展示，由系统生成或第三方提供，如有异议请及时与我们联系。
                    </view>
                    <view class="listItem">
                        2、页面所载内容不代表本网站之观点或意见，仅提供用户参考与借鉴，准确信息最终以政府网站或开发商实际公示、签约合同为准。
                    </view>
                    <view class="listItem">
                        3、商品房预售须取得《商品房预售许可证》，用户在购房时需谨慎查验开发商的证件信息，判断是否满足现/预售条件。
                    </view>
                </view>
            </up-modal>
        </view>
    </block>
</template>
<script>
    import { mapState, mapActions } from 'pinia';
    import { useUserInfoStore, useConfigStore } from '@/store/index';
    import { isBoolean } from '@/common/common';
    import { houseDynamicAPI } from '@/common/api';
    // import { dispatchClient } from '@/common/api-adviser';
    // import { getSellerInfoById } from '@/common/api/adviser';

	export default {
		data() {
			return {
                shadowSty: {
                    paddingTop: "10rpx",
                    marginTop: "0rpx"
                },
				mianze: false,
                curr: 0,
                list: [[{title: '', value: []}]],
                productId: '',
                title: '',
                share: false,
                start_time: 0,
                scrollAnimate: false,
                recommendAdviser: {}
            }
		},
        computed:{
            ...mapState(useUserInfoStore, ['userInfo']),
            ...mapState(useConfigStore, ['puid', 'scene']),
        },
        onShareAppMessage(res) {
            return {
                title: `【${this.title}】楼盘动态，点击了解详情`,
                path: `/pages/product/dynamic/index?productId=${this.productId}&title=${this.title}&share=true&puid=${this.userInfo.id}&prepage=楼盘动态-${this.productId}-${this.title}`,
            }
        },
        
        //#ifdef MP-WEIXIN
        onShareTimeline() {
            return {
                title: `【${this.title}】楼盘动态，点击了解详情`,
                query: `productId=${this.productId}&title=${this.title}&share=true&puid=${this.userInfo.id}&prepage=楼盘动态-${this.productId}-${this.title}`
            }
        },
        //#endif
        
		onLoad(options) {
            let { title='', productId='', puid='', share=false } = options;
            
            //朋友圈进入小程序快照场景
            if(this.scene == 1154) return;
            
            if(puid&&puid!=='undefined') {
                this.setPuid(puid)
            }
			this.productId = productId&&productId!=='undefined'?productId:'';
            this.start_time = (new Date()).getTime();
            this.title = title&&title!=='undefined'?title:'';
            this.share = isBoolean(share);

            let that = this;
			if(that.productId){
				uni.$check_and_login(function () {
					that.init();
				})
			}
		},
        
        methods: {
            ...mapActions(useConfigStore, ['setPuid']),
			//初始化数据
			async init(){
				uni.showLoading({
					title: '数据加载中',
					mask: true
				})

                let detailRes = await houseDynamicAPI(this.productId);
                if(detailRes.status == 0) {
                    this.list = detailRes.detail;
                    uni.hideLoading();
                }else {
                    uni.hideLoading();
                    uni.$u.toast(detailRes.detail)
                }

                //绑定客户
                // await dispatchClient({
                //     share: this.share,
                //     puid: this.puid,
                //     pid: this.productId
                // });

                //根据顾问ID获取被绑定的顾问信息
                // if(this.puid && this.puid !== this.userInfo.id) {
                //     let sellInfoRes = await getSellerInfoById({id: this.puid, productId: this.productId});
                //     if(sellInfoRes.status === 0) {
                //         if(sellInfoRes.detail.product_id && sellInfoRes.detail.product_id == this.productId) {
                //             this.recommendAdviser = sellInfoRes.detail;
                //         }
                //     }
                // }
			},
            
            changeTabs(index) {
                this.curr = index
            },
            preImg(info,index){
                let imgs = info.map(item => {
                    return item.url
                })
                uni.previewImage({
                    current: index,
                    urls: imgs,
                    longPressActions: {
                        itemList: ['发送给朋友', '保存图片', '收藏']
                    }
                })
            }
		}
	}
</script>

<style lang="scss" scoped>
	.pages{
        line-height: 1;
		min-height: 100vh;
        overflow: hidden;
        padding: 0rpx 28rpx;
		background-color: #FFFFFF;
        .tabs{
            justify-content: flex-start;
            .tab{
                height: 80rpx;
                margin: 0rpx 20rpx;
                border-bottom: 4rpx solid #fff;
            }
            .active{
                border-bottom: 4rpx solid $theme-color;
                font-weight: bold;
            }
        }
        .mianze{
            margin: 20rpx 0rpx 40rpx 0rpx;
            justify-content: flex-start;
            color: #82848a;
        }
        .mianzeCon{
            padding: 20rpx 30rpx;
            line-height: 1.5;
            .listItem{
                margin-top: 20rpx;
            }
        }
        .u-node {
            width: 26rpx;
            height: 26rpx;
            border-radius: 50%;
            position: relative;
            background-color: $bg-primary-opacity;
            &::before{
                content: "";
                width: 15rpx;
                height: 15rpx;
                border-radius: 50%;
                position: absolute;
                left: 7rpx;
                top: 7rpx;
                background-color: $color-primary;
            }
        }
        .cont{
            .title {
                margin-top: 20rpx;
                line-height: 1.5;
            }
            .desc {
                margin-top: 30rpx;
                .contTxt{
                    white-space: pre-wrap;
                    line-height: 1.4;
                }
            }
            
            .imgs {
                margin-top: 30rpx;
                .dynamicImg{
                    width: 200rpx;
                    height: 200rpx;
                    display: inline-block;
                    margin-right: 10rpx;
                    margin-bottom: 20rpx;
                }
            }
        }
	}
</style>